{%extends "base.html"%}

{%block head%}
<script src="https://cdn.staticfile.org/socket.io/2.3.0/socket.io.js"></script>
<!-- <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script> -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<style>
    pre>code {
        font-family: "Sans Mono", "Consolas", "Courier", monospace;
        font-size: 130% !important;
        background-color: white !important;
        line-height: 25px;
    }
</style>
{%endblock%}
{%block body%}
<script>
    var submission, socket;
    console.log("qwq");
    $(document).ready(() => {
        const url = window.location.href.split("/");
        const submission_id = url[url.length - 1];
        $("title").text("查看提交 - " + submission_id + " - {{APP_NAME}}")
        Vue.component(
            "memory-cost-label", {
            delimiters: ["{[", "]}"],
            props: {
                bytes: Number, unit: String
            }, computed: {
                value() {
                    if (this.unit == "b") {
                        return this.bytes + " Bytes"
                    } else if (this.unit == "kb") {
                        return parseInt(this.bytes / 1024) + " KBytes"
                    } else if (this.unit == "mb") {
                        return parseInt(this.bytes / 1024 / 1024) + " MBytes"
                    }
                    else if (this.unit == "gb") {
                        return parseInt(this.bytes / 1024 / 1024 / 1024) + " GBytes"
                    }
                    return "What are you doing???";

                }
            }, template: "<div>{[value]}</div>"
        }
        );
        submission = new Vue({
            delimiters: ['{[', ']}'],
            el: "#submission",
            mixins: [baseMixin],
            data: {
                //是否完成加载
                done: false,
                //提交数据
                data: null,
                //评测状态列表
                judge_status: null,
                //是否为比赛提交
                contestSubmit: false,
                usingMemoryUnit: "kb"
            }, computed: {
                problem_subtasks: function () {
                    var obj = {};
                    this.data.problem.subtasks.forEach((x) => {
                        obj[x.name] = x;
                    })
                    return obj;
                }
            }, mounted: function () {

            }, methods: {
                copy_text: copy_text, rejudge() {
                    $.post("/api/rejudge", { submission_id: this.data.id }).done(ctx => {
                        ctx = JSON.parse(ctx);
                        if (ctx.code) {
                            showErrorModal(ctx.message);
                            return;
                        }
                        window.location.reload();
                    })
                }
            }
        })
        $.post("/api/get_submission_info", { submission_id: submission_id }).done((ctx) => {
            ctx = JSON.parse(ctx);
            if (ctx.code) {
                show_error_modal(ctx.message);
                return;
            }
            submission.data = ctx.data;
            submission.contestSubmit = submission.data.contest.isContest;

            $.post("/api/get_judge_status").done(ctx => {
                submission.judge_status = JSON.parse(ctx).data;
                if (submission.data.status == "judging" || submission.data.status == "waiting") {
                    socket = io(window.location.origin + "/ws/submission");
                    console.log("Tracker connected.");
                    socket.emit("init", { "submission_id": submission_id });
                    socket.on("update", (x) => {
                        console.log("Tracker updated:");
                        console.log(x);
                        submission.data.message = x.message;
                        submission.data.judge_result = x.judge_result;
                        submission.data.status = x.status;
                        submission.data.score = x.score;
                        // if (submission.data.status != "judging" && submission.data != "waiting") socket.close();
                    });
                }

                submission.done = true;
                submission.$nextTick(() => {
                    hljs.highlightBlock(document.getElementsByTagName("code")[0]);
                });
            });
        });
    });
</script>
<style>
    .first-column {
        min-width: 70px;
        width: 100px !important;
    }
</style>
<div id="submission" v-if="done">
    <div class="ui header">
        <h2>查看提交</h2>
    </div>
    <div class="ui stack segment">
        <table class="ui very basic celled  table" style="max-width: 700px;">
            <tbody>
                <tr>
                    <td class="first-column">提交ID</td>
                    <td>{[data.id]}</td>
                </tr>
                <tr>
                    <td class="first-column">题目</td>
                    <td v-if="contestSubmit"><a
                            :href="'/contest/'+data.contest_id+'/problem/'+data.problem.id">{[data.problem.id]}
                            {[data.problem.title]}</a></td>

                    <td v-else><a :href="'/show_problem/'+data.problem.id">{[data.problem.id]}
                            {[data.problem.title]}</a></td>
                </tr>
                <tr v-if="contestSubmit">
                    <td class="first-column">
                        比赛
                    </td>
                    <td>
                        <a :href="'/contest/'+data.contest.id">{[data.contest.name]}</a>
                    </td>
                </tr>
                <tr>
                    <td class="first-column">提交者</td>
                    <td><a :href="'/profile/'+data.user.uid">{[data.user.username]}</a></td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <judge-status :status="data.status"></judge-status>
                    </td>
                </tr>
                <tr v-if="data.time_cost!=-1">
                    <td>时间开销</td>
                    <td>
                        {[data.time_cost]} ms
                    </td>
                </tr>

                <tr v-if="data.memory_cost!=-1">
                    <td>空间开销</td>
                    <td>
                        <memory-cost-label v-bind:bytes="data.memory_cost" v-bind:unit="usingMemoryUnit">
                        </memory-cost-label>
                    </td>
                </tr>

                <tr>
                    <td>得分/总分</td>
                    <td>
                        <score-label :score="data.score" :full_score="data.problem.score"></score-label>
                    </td>
                </tr>
                <tr>
                    <td>编译参数</td>
                    <td>
                        {[data.extra_compile_parameter]}
                    </td>
                </tr>
                <tr>
                    <td class="first-column">提交时间</td>
                    <td>{[data.submit_time]}</td>
                </tr>
                <tr>
                    <td class="first-column">评测机</td>
                    <td>{[data.judger]}</td>
                </tr>
                <tr>
                    <td class="first-column">语言</td>
                    <td>{[data.language_name]}</td>
                </tr>
                <tr>
                    <td class="first-column">内存显示单位</td>
                    <td>
                        <div class="ui buttons">
                            <div class="ui button" v-bind:class="{active:usingMemoryUnit=='b'}"
                                v-on:click="usingMemoryUnit='b'">Bytes
                            </div>
                            <div class="ui button" v-bind:class="{active:usingMemoryUnit=='kb'}"
                                v-on:click="usingMemoryUnit='kb'">
                                KBytes</div>
                            <div class="ui button" v-bind:class="{active:usingMemoryUnit=='mb'}"
                                v-on:click="usingMemoryUnit='mb'">
                                MBytes</div>
                            <div class="ui button" v-bind:class="{active:usingMemoryUnit=='gb'}"
                                v-on:click="usingMemoryUnit='gb'">
                                GBytes</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="first-column">附加信息</td>
                    <td>
                        <pre style="white-space: pre-wrap; word-wrap: break-word;">{[data.message]}</pre>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="ui very tiny red button" v-if="data.managable && !data.isRemoteSubmission" v-on:click="rejudge">
            重测
        </div>
        <div class="ui divider"></div>
        <div v-for="val,key in data.judge_result">
            <div class="ui header">
                <h3>
                    {[key]}
                </h3>
            </div>
            <table class="ui very basic  celled  table" style="max-width: 5 00px;">
                <tbody>
                    <tr>
                        <td>得分/总分</td>
                        <td>
                            <!-- {[val]} -->
                            <!-- {[problem_subtasks[key]]} -->
                            <div v-if="!problem_subtasks[key]">
                                <span style="font-weight: bold">{[val.score]}</span>
                            </div>
                            <score-label v-else :score="val.score" :full_score="problem_subtasks[key].score">
                            </score-label>
                        </td>
                    </tr>
                    <tr>
                        <td>状态</td>
                        <td>
                            <judge-status :status="val.status"></judge-status>
                        </td>
                    </tr>
                </tbody>
            </table>
            <table class="ui basic table" style="max-width: 900px">
                <thead>
                    <tr>
                        <th>输入文件</th>
                        <th>输出文件</th>
                        <th>分数</th>
                        <th>状态</th>
                        <th>时间</th>
                        <th>内存</th>
                        <th>附加信息</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="testcase in val.testcases">
                        <td><a :href="'/api/download_file/'+data.problem.id+'/'+testcase.input">{[testcase.input]}</a>
                        </td>
                        <td><a :href="'/api/download_file/'+data.problem.id+'/'+testcase.output">{[testcase.output]}</a>
                        </td>
                        <td>
                            <score-label :score="testcase.score" :full_score="testcase.full_score"></score-label>
                        </td>
                        <td>
                            <judge-status :status="testcase.status"></judge-status>
                        </td>
                        <td>{[testcase.time_cost]}ms</td>
                        <td>
                            <memory-cost-label v-bind:bytes="testcase.memory_cost" v-bind:unit="usingMemoryUnit">
                            </memory-cost-label>

                        </td>
                        <td>
                            {[testcase.message]}
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="ui divider"></div>
        </div>
        <div class="ui container" style="max-width: 500px;">
            <div class="ui tiny orange circular icon button" @click="copy_text(data.code)"><i
                    class="clipboard outline icon"></i></div>

            <pre><code class="ui segment">{[data.code]}</code></pre>
        </div>
    </div>
</div>
{%endblock%}